<!-- 标签管理 - 弹框 -->
<template>
    <el-dialog 
    :title="typeTitle+'标签'"
    v-model="dialogVisible"
    width="45%"
    :close-on-click-modal="false" 
    :close-on-press-escape="true"
    @closed="resetForm(formRef)">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
            <el-form-item label="标签名称" prop="tagName">
                <el-input v-model="form.tagName" :readonly="billState" placeholder="请输入标签名"></el-input>
            </el-form-item>
            <el-form-item label="标签描述" prop="tagDesc">
                <el-input type="textarea" v-model="form.tagDesc" :readonly="billState" placeholder="描述"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="">
                <el-radio-group :disabled="billState" v-model="form.state">
                    <el-radio v-for="item in stateList" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button type="primary" class="" v-if="dialogState == 'add'" :loading="submitLoading" @click="submitClick">确定</el-button>
                <el-button type="primary" class="" v-if="dialogState == 'update'" :loading="updateLoading" @click="updateClick">确定</el-button>
                <el-button class="" @click="resetForm(formRef)">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, nextTick, reactive, ref } from "vue";
import { ElMessage } from 'element-plus';
import { tagApi } from "../../../api/article/tag/tag-api";


// ========================= 弹框控制 =========================
let dialogVisible = ref(false);
let dialogState = ref('add');
function onShowDialog(type, row) {
    if(row) {
        for(let key in form) {
            form[key] = row[key];
        };
        form.id = row.id;
    };
    dialogState.value = type;
    dialogVisible.value = true;
};

// 组件向外暴露属性或方法
defineExpose({
    onShowDialog
});

// ========================= 计算属性 =========================
const typeTitle = computed(() => {
    if(dialogState.value == 'add') return '新增';
    if(dialogState.value == 'update') return '修改';
    if(dialogState.value == 'view') return '查看';
});

const billState = computed(() => {
    if(dialogState.value != 'view') return false;
    return true;
});

// ========================= 定义发射给父组件的方法 =========================
const emits = defineEmits(['updateTagList']);

// ========================= 表单 =========================
const form = reactive({
    id:'',              // 主键
    tagName:'',         // 标签名称
    state: true,        // 状态
    tagDesc:'',         // 描述
    createdAt:'',       // 创建时间
    updatedAt:'',       // 更新时间
});
const rules = reactive({
    tagName: [
        { required: true, message: '请输入标签名称', trigger: 'blur' }
    ],
});

let stateList = reactive([
    {label: '正常', value: true},
    {label: '停用', value: false},
]);

// 表单操作
const formRef = ref();
let submitLoading = ref(false);
// 提交
function submitClick() {
    formRef.value.validate(async (valid) => {
        try {
            if(valid) {
                submitLoading.value = true;
                let date = new Date();
                form.createdAt = date;
                form.updatedAt = date;
                delete form.id;
                const res = await tagApi.create(form);
                if(res.meta.status !== 200) throw new Error(res.meta.msg);
                ElMessage.success('新增成功');
                submitLoading.value = false;
                dialogVisible.value = false;
                emits('updateTagList');
            };
        } catch (e) {
            console.error(e);
            ElMessage.error(e.message);
        }finally {
            submitLoading.value = false;
        };
    });
};

// 更新
let updateLoading = ref(false);
function updateClick() {
    formRef.value.validate(async (valid) => {
        try {
            if(valid) {
                updateLoading.value = true;
                let date = new Date();
                form.updatedAt = date;
                const res = await tagApi.update(form);
                if(res.meta.status !== 200) throw new Error(res.meta.msg);
                ElMessage.success('修改成功');
                updateLoading.value = false;
                dialogVisible.value = false;
                emits('updateTagList');
            };
        } catch (e) {
            console.error(e);
            ElMessage.error(e.message);
        }finally {
            updateLoading.value = false;
        };
    });
}

// ========================= 重置表单 =========================
function resetForm(refFormName) {
    refFormName.resetFields(); // 重置表单
    for(let key in form) {
        form[key] = ''
    };
    dialogVisible.value = false;
    form.state = true;
};

</script>

<style lang="scss" scoped>

</style>